{% extends "article/base.html" %}
{% load staticfiles %}
{% block title %}articles tag{% endblock %}
{% block content %}
<div>
    <p>添加文章标签</p>
    <form class="form-horizontal" action="." method="post">{% csrf_token %}
        <div class="row" style="margin-top: 10px;">
            <div class="col-md-2 text-right"><span>文章标题</span></div>
            <div class="col-md-10 text-left">{{article_tag_form.tag}}</div>
        </div>
        <div class="row">
            <input type="button" class="btn btn-primary btn-lg" style="margin-left: 200px;
                margin-top: 10px;" value="添加" onclick="add_tag()">
        </div>
    </form>
</div>
<div>
    <p>已有标签列表</p>
    <table class="table table-hover">
        <tr>
            <td>序号</td>
            <td>文章标签</td>
            <td>操作</td>
        </tr>
        {% for article_tag in article_tags %}
        <tr id={{forloop.counter}}>
            <td>{{forloop.counter}}</td>
            <td>{{article_tag.tag}}</a></td>
             <td>
                <a nane="delete" href="javascript:" onclick="del_tag(this, {{ article_tag.id }})">
                    <span class="glyphicon glyphicon-trash"></span>
                </a>
            </td>
        </tr>
        {% empty %}
        <p>You have no article tags.Please add them.</p>
        {% endfor %}
    </table>
</div>
<script type="text/javascript" src="{% static 'js/jquery.js' %}"></script>
<script type="text/javascript" src="{% static 'js/layer.js' %}"></script>
<script type="text/javascript">
function add_tag() {
    tag=$("#id_tag").val();
    $.ajax({
        url:'{% url "article:article_tag" %}',
        type:"POST",
        data:{"tag":tag},
        success:function (e) {
            if(e=="1"){
                layer.msg("YOU have added a new tag.");
                window.location.reload();
            }else {
                layer.msg(e)
            }
        }
    });
}
function del_tag(the,tag_id) {
    var article_tag=$(the).parents("tr").children("td").eq(1).text();
    layer.open({
        type:1,
        skin:"layui-layer-rim",
        area:["400px","200px"],
        title:"删除文章标签",
        content:'<div class="text-center" style="margin-top:20px"><p>是否确定删除文章《'+article_tag+'》</p></div>',
        btn:['确定','取消'],
        yes:function () {
            $.ajax({
                url:'{% url "article:del_article_tag" %}',
                type:"POST",
                data:{"tag_id":tag_id},
                success: function (e) {
                    if(e=="1"){
                        parent.location.reload();
                        layer.msg("The tag has been deleted.");
                    }else {
                        layer.msg("删除失败");
                    }
                },
            })
        },
    });
}
</script>
{% endblock %}